<template>
  <div>
    <span v-show="title" style="font-weight: bold;padding-right: 13px;color: #606266;font-size: 14.3px">{{title}}</span>
    <el-date-picker v-model="startTime" type="date" placeholder="选择开始时间"
                    @change="handleStartTimeChange"></el-date-picker>
    -
    <el-date-picker v-model="endTime" type="date" placeholder="选择结束时间"
                    @change="handleEndTimeChange"></el-date-picker>
  </div>
</template>

<script> export default {
  props:['title'],
  data() {
    return {
      startTime: this.start,
      endTime: this.end,
    };
  },
  methods: {
    handleStartTimeChange(val) {
      this.startTime = val ? val.setHours(0, 0, 0, 0) : null;
      // this.$yun.convertToZeroUTC() 转时区的方法
      if (this.startTime && this.endTime) {
        this.$emit('time-range-selected', {startTime: this.startTime, endTime: this.endTime});
      }else{
        this.$emit('time-range-selected', {startTime: val, endTime: this.endTime});
      }
    },
    handleEndTimeChange(val) {
      this.endTime = val ? val.setHours(23, 59, 59, 999) : null;
      if (this.startTime && this.endTime) {
        this.$emit('time-range-selected', {startTime: this.startTime, endTime: this.endTime});
      }else{
        this.$emit('time-range-selected', {startTime: this.startTime, endTime: val});

      }
    },
   messageError(){
     this.$message({
       message: '请先选择开始时间',
       type: 'warning'
     });
   },
    clear(){
      this.startTime = this.start
      this.endTime = this.end
    }
  },
  watch: {
    endTime(newVal, oldVal) {
      if (newVal === null && !this.startTime) {
        // 处理删除时间的逻辑
        this.messageError();
      }
    },
  },
}
</script>
